<template>
  <div class="box3">
      <input type="checkbox" v-model="bool">
      <h1 v-if="bool">你好</h1>
      <h1 v-else>你坏</h1>
    
    <input type="checkbox" v-model="bool">
    <h1 v-if="num==1">看剧</h1>
    <h1 v-else-if="num==2">打游戏</h1>
    <h1 v-else-if="num==3">吃饭</h1>
    <h1 v-else>泡妹</h1>

    <h1 v-text="text">{{num}}</h1>

    <h1 v-html="txt"></h1>
    <h1 v-text="txt"></h1>
    <h1>{{txt}}</h1>

    <input type="text" v-model="ppt">
    <h1>{{ppt}}</h1>
    <h1 v-once>{{ppt}}</h1>
    <h1>{{ppt}}</h1>

    <input type="text" v-model="doc">

    <h1>{{jpg}}</h1>
    <button @click="fun()">点我修改jpg</button>

    <button @click="funa($event)">点我触发事件对象</button>

    <h1>修饰符</h1>
    <input type="text" @keydown.space="funb()">
    <h1>计算属性</h1>
    <h1>正常{{png}}</h1>
    <h1>大写{{dpng}}</h1>
    <h1>大写截取{{dspng}}</h1>

    <h1>axios前后台交互</h1>
    <h1>跨域</h1>
    <h2>devserver代理跨域，nginx反向代理，cors</h2>
    <h3>devserver代理跨域，在跟目录下新建vue.config.js文件，module.export={devserver:{proxy:{
        吧}}}</h3>

</div>
</template>

<script>
export default {
    data(){
        return{
            bool:true,
            num:5,
            text:"#$678hda好好%#￥%……",
            txt:"<b>时候的哈哈</b>",
            ppt:"你似乎忽略了",
            doc:"监听",
            jpg:"回家的回家",
            png:"asdfghjkl"
        }
    },
    watch:{
        doc(newval,oldval){
            console.log(newval+"-----"+oldval);
        }
    },
    methods:{
        fun(){
            this.jpg="大家lads就"
        },
        funa(hehe){
            console.log(hehe.target);
        },
        funb(){
            console.log("空格按下了");
        }

    },
    computed:{
        dpng(){
            return this.png.toUpperCase()
        },
        dspng(){
            return this.png.toUpperCase().substr(0,5)
        }
    }
    
}
</script>

<style scoped>
.box3{
    height: 100%;
    width: 100%;
}
</style>